<template>
	<view class="content">
		<!--  style="background-image: url(../../static/iconBg.png);" -->
		<!-- <nav-bar  bgColor="#fffff" :shadow="false"></nav-bar> -->
		<view class="content"><Modal v-model="show" title="错误" text="账户余额不足" @cancel="cancel" @confirm="confirm" @event="event" /></view>
		<view class="header"></view>
		<view class="card-item" style="padding:30px;">
			<view class="card-item-content uni-flex uni-row">
				<view class="list-item" v-for="(item, id) in list" :key="id" :data-item="item.id" :data-price="item.price" @tap="showModal" data-target="Image">
					<view class="list-item-box" :style="{ backgroundImage: 'url(' + 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=227863876,861153047&fm=26&gp=0.jpg' + ')' }" style="background-size: contain;">
						<!-- item.image -->
					<!-- 	<view class="flex  p-xs margin-bottom-sm mb-sm">
							<view class="flex-sub pt20" style="max-width: 150rpx;">
								￥
								<text class="num">{{ item.price }}</text>
							</view>
							<view class="flex-twice flex-xy h100 fs42w " style="" >
							
								<view class=" h100 pt20">
									<text style="padding-right: 80rpx; " class="">代金券</text>
								</view>
							</view>
						</view> -->
						
						<view class="flex-spc-x h100 ">
								<view class="  flex-xy" style="max-width: 150rpx;">
									<view>
										￥
										<text class="num">{{ item.price }}</text>
									</view>
						
								</view>
								<view class="  flex-xy fs42w " style="" >
								
									<view class=" h100 ">
										<text style="padding-right: 100rpx; " class="">代金券</text>
									</view>
								</view>
							</view>
						
						
						
					</view>
				</view>
			</view>
		</view>

		<view class="underlinetext" v-if="loadAll">已经到底啦！</view>

		<view class="cu-modal" :class="modalName == 'Image' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="bg-img">
					<view class="cu-bar justify-end text-white">
						<view class="action" @tap="hideModal"><text class="cuIcon-close "></text></view>
					</view>
					<view class="" style="margin:230px auto 20px;">
						<view class="mainTitle">恭喜你兑换成功</view>
						<view class="text-gray">成功使用{{ pic }}瑞币</view>
					</view>
					<view class="cu-bar btn-group">
						<button class="cu-btn text-green line-blue shadow round" @tap="hideModal">继续兑换</button>
						<button class="cu-btn bg-blue shadow-blur round" @click="go_my">立即使用</button>
					</view>
				</view>
			</view>
		</view>

		<view class="cs" v-show="play">
			<view class="cu-dialog" style="width: 100%;height: 100%;">
				<view class="bg">
					<view class="cu-bar justify-end text-white">
						<view class="action" @tap="hide"><text class="cuIcon-close "></text></view>
					</view>
					<iframe :src="url" frameborder="0"></iframe>
				</view>
			</view>
		</view>
	</view>
</template>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
import Modal from '@/components/x-modal/x-modal';

var api = require('../../api/api.js');
export default {
	components: { Modal },
	data() {
		return {
			loadAll: null,
			show: false,
			play: false,
			toname: null,
			modalName: null,
			token: '',
			list: [],
			pic: '',
			username: '',
			id: '',
			url: '',
			image: ','
		};
	},
	onLoad: function(option) {
		this.image = option.url;
		const token = uni.getStorageSync('token');
		setTimeout(function() {
			console.log('start pulldown');
		}, 1000);
		//uni.startPullDownRefresh();
		uni.startPullDownRefresh({
			success: function(res) {
				console.log(res); //success 返回参数说明
			}
		}); //
		uni.request({
			url: api.Dui,
			method: 'post',
			// headers: {'Authorization':token},
			data: {
				pid: parseInt(option.id)
			},
			success: res => {
				if (res.data.errmsg == '成功') {
					// console.log(res.data.data.quanList)
					this.list = res.data.data.quanList;
				}
			}
		});
	},
	onPullDownRefresh() {
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		console.log('refresh');
		setTimeout(function() {
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}, 10);
	},

	mounted() {},

	methods: {
		showModal(e) {
			// console.log(this.list)
			for (let i = 0; i < this.list.length; i++) {
				// console.log(1)
				if (this.list[i].id == e.currentTarget.dataset.item) {
					this.pic = this.list[i].price;
					this.url = this.list[i].url;
				}
			}
			// console.log(this.url)
			this.modalName = e.currentTarget.dataset.target;
			uni.request({
				url: api.Huan,
				method: 'post',
				data: {
					desc: uni.getStorageSync('username'),
					id: Number(e.currentTarget.dataset.item),
					price: Number(e.currentTarget.dataset.price)
				},
				success: res => {
					console.log(res);
					if (res.data.errmsg == '成功') {
						let userdata = {
							balance: res.data.data[0].balance
						};
						try {
							uni.setStorageSync('balance', userdata.balance);
						} catch (e) {}
					} else if (res.data.errmsg == '余额不足') {
						this.modalName = null;
						this.show = true;
					}
				}
			});
		},
		hide() {
			this.play = !this.play;
			location.reload();
		},
		hideModal(e) {
			this.modalName = null;
			location.reload();
		},
		go_my() {
			if (this.url == '') {
				this.show = true;
				this.modalName = null;
			} else {
				this.modalName = null;
				this.play = !this.play;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
$item-margin-bottom: 30upx;
$item-margin-side: 20upx;
$line-color: #f9f9f9;
$border-color: #aa833e;
page {
	background-color: #f6f6f6;
}
.header {
	color: $uni-text-color-inverse;
	margin-bottom: $item-margin-bottom;
	position: relative;
	// height:70px;
	.img-profile {
		image {
			width: 150upx;
			height: 150upx;
			border-radius: 50%;
			vertical-align: middle;
		}
	}
	.usertag {
		padding: 0 20upx;
		background-color: #cb9a5c;
		border-radius: 30upx;
		font-size: 24upx;
		margin-right: 20upx;
		border: 1px solid $border-color;
		line-height: 1.6;
	}
	.nikename {
		font-size: 30upx;
		margin-bottom: 10upx;
		.usertag {
			margin-left: 20upx;
			border: none;
			display: inline-block;
		}
	}
	.setting-btn {
		width: 60upx;
		height: 60upx;
		position: absolute;
		top: 40upx;
		right: 40upx;
	}
}
.content {
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;
}
.card-item {
	background-color: #fff;
	border-radius: 20upx;
	margin: 0 $item-margin-side $item-margin-bottom $item-margin-side;
	text-align: center;
	box-shadow: 0 3px 9px rgba(0, 0, 0, 0.2);
}

.list-item {
	background: url(../../static/quanBg.png) center right no-repeat;
	height: 76px;
	width: 285px;
	border: 1px dashed #ccc;
	margin: 20px auto;
}
.list-item-box {
	height: 76px;
	width: 285px;
	padding-left: 91px;
	background-repeat: no-repeat;
	text-align: left;
	padding-top: 10px;
}
.num {
	font-size: 40px;
	line-height: 50px;
}
.bg-img {
	background-image: url('../../static/dailogBg.png');
	background-position: top center;
	height: 439px;
}
.bg {
	background-position: top center;
	width: 100%;
	height: 90%;
}
.cu-dialog {
	background: none;
}
.mainTitle {
	color: #3a8fff;
	font-size: 24px;
}
.cs {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.6);
}
iframe {
	width: 100%;
	height: 90%;
}
</style>
